<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #contain {
            width: 600px;
            margin: 0 auto;
            border: 1px seagreen solid;
            background-color: #c0c0c0;
            border-radius: 8px;

        }

        #top {
            width: 100%;
            display: flex;
            margin: 0 auto;
            height: 100px;
        }

        #top div {
            margin: 20px auto;
            line-height: 50px;
            font-size: 50px;
        }


        #top div input {
            height: 50px;
            font-size: 50px;
            max-width: 120px;
            text-align: center;
        }


        #middle {
            display: flex;
            margin: 0 auto;
            height: 150px;
        }

        #middle div {
            margin: 0 auto;
            line-height: 80px;
            font-size: 80px;
        }


        #bottom {
            display: flex;
            margin: 0 auto;
            height: 80px;
        }

        #bottom div {
            margin: 0 auto;
            line-height: 30px;
            font-size: 30px;
            text-align: center;
        }
    </style>
    <script>
        var totalSecond;
        var myTimer;
        var isPauseClick = false;

        function start() {
            if(!isPauseClick){
                var totalMinute = parseInt(document.getElementById('total').value);
                totalSecond = totalMinute * 60;
            }
            document.getElementById("startBtn").onclick=null;
            document.getElementById("pauseBtn").onclick=pause;
            myTimer = setInterval(timerDown, 1000);
        }

        function timerDown() {
            var hour = parseInt(totalSecond / 3600);
            var minute = parseInt(totalSecond % 3600 / 60);
            var second = totalSecond % 60;

            if (hour <= 9) {
                document.getElementById('hour').innerHTML = '0' + hour;
            } else {
                document.getElementById('hour').innerHTML = hour;
            }
            if (minute <= 9) {
                document.getElementById('minute').innerHTML = '0' + minute;
            } else {
                document.getElementById('minute').innerHTML = minute;
            }
            if (second <= 9) {
                document.getElementById('second').innerHTML = '0' + second;
            } else {
                document.getElementById('second').innerHTML = second;
            }

            totalSecond--;
        }

        function minus() {
            var totalMinute = parseInt(document.getElementById('total').value);
            if(totalMinute>1){
                document.getElementById('total').value = --totalMinute;
            }
            
        }

        function minuAdd() {
            var totalMinute = parseInt(document.getElementById('total').value);
            if(totalMinute<5999){
            document.getElementById('total').value = ++totalMinute;
            }
        }

        function pause() {
            clearInterval(myTimer);
            document.getElementById("startBtn").onclick=start;
            document.getElementById("pauseBtn").onclick=null;
            isPauseClick = true;
        }

        function check(e){
            var totalMinute = document.getElementById('total').value;
            var temp="";
            for(var i=0;i<totalMinute.length;i++){
                var code = totalMinute.charCodeAt(i);
                if(code>=48 && code <=57){
                    temp += totalMinute[i];
                }
            }
            document.getElementById('total').value = temp;
    }

        function refresh() {
            location.reload();
        }
    </script>


</head>

<body>
    <div id="contain">
        <div id="top">
            <div onclick="minus()">-</div>
            <div><input id="total" type="text" value="10" onkeyup="check(event)"/>分钟</div>
            <div onclick="minuAdd()">+</div>
        </div>
        <div id="middle">
            <div id='hour'>00</div>
            <div>-</div>
            <div id="minute">00</div>
            <div>-</div>
            <div id="second">00</div>
        </div>
        <div id="bottom">
            <div id="pauseBtn">暂停</div>
            <div id="startBtn" onclick="start()">开始</div>
            <div onclick="refresh()">刷新</div>
        </div>

    </div>
</body>

</html>